<script setup lang="ts">
import type { Viewer } from 'cesium'
import * as Cesium from 'cesium'
import { useBoolean, useWindLayer } from '@/hooks'
import Typhoon from '@/utils/typhoon'
import earth_skin from '@/assets/images/earth_skin.jpg'
import CesiumWind from '@/utils/windLayer'
import { WindLayer } from 'cesium-wind-layer'
import { useTyphoonStore } from '@/store'

const typhoonStore = useTyphoonStore()
const { bool: addLoading, setTrue: startLoading, setFalse: endLoading } = useBoolean(true)
let windLayers: { partialWindLayer: WindLayer; globalWindLayer: CesiumWind }

async function initViewer() {
  const options: Viewer.ConstructorOptions = {
    // selectionIndicator: false, //关闭点击方框
    // infoBox: false, //关闭属性默认弹窗
    geocoder: false, // 地理位置查询定位控件
    homeButton: false, // 默认相机位置控件
    baseLayer: false, // 不显示默认图层
    timeline: false, // 时间滚动条控件
    navigationHelpButton: false, // 默认的相机控制提示控件
    fullscreenButton: false, // 全屏控件
    scene3DOnly: true, // 每个几何实例仅以3D渲染以节省GPU内存
    baseLayerPicker: false, // 底图切换控件
    shadows: true,
    animation: false, // 控制场景动画的播放速度控件
    orderIndependentTranslucency: false
  }
  window.viewer = new Cesium.Viewer('cesiumContainer', options)
  // // 开启帧率
  // window.viewer.scene.debugShowFramesPerSecond = true
  // // 清除默认地形
  // window.viewer.scene.terrainProvider = new Cesium.EllipsoidTerrainProvider({})
  // // 加载默认地形
  // window.viewer.terrainProvider = await Cesium.createWorldTerrainAsync({
  //   requestWaterMask: true, // 请求水掩膜以实现水体效果
  //   requestVertexNormals: true // 请求法线以实现光照效果
  // })
  const imagelayer = await Cesium.SingleTileImageryProvider.fromUrl(earth_skin)
  window.viewer.imageryLayers.addImageryProvider(imagelayer)
  window.viewer.scene.skyBox = new Cesium.SkyBox({
    sources: {
      positiveX: '/skyboxs/tycho2t3_80_px.jpg',
      negativeX: '/skyboxs/tycho2t3_80_mx.jpg',
      positiveY: '/skyboxs/tycho2t3_80_py.jpg',
      negativeY: '/skyboxs/tycho2t3_80_my.jpg',
      positiveZ: '/skyboxs/tycho2t3_80_pz.jpg',
      negativeZ: '/skyboxs/tycho2t3_80_mz.jpg'
    }
  })
  // 太阳光照
  // window.viewer.scene.globe.enableLighting = true
  window.viewer.camera.setView({
    // destination: Cesium.Cartesian3.fromDegrees(106, 30, 17612870),
    destination: Cesium.Cartesian3.fromDegrees(120.1, 8.85, 17612870),
    orientation: {
      heading: Cesium.Math.toRadians(360),
      pitch: Cesium.Math.toRadians(-90.0),
      roll: 0.0
    }
  })
}

onMounted(async () => {
  startLoading()
  await initViewer()
  // 添加台风警戒线
  Typhoon.initJJLine()
  // 风场加载
  windLayers = await useWindLayer()
  endLoading()
})

watch(
  () => [typhoonStore.partialWindLayerShow, typhoonStore.globalWindLayerShow],
  () => {
    if (typhoonStore.globalWindLayerShow) {
      windLayers.globalWindLayer.show()
    } else {
      windLayers.globalWindLayer.hide()
    }
    windLayers.partialWindLayer.show = typhoonStore.partialWindLayerShow
  },
  { flush: 'post' }
)
</script>

<template>
  <div id="cesiumContainer"></div>
  <Loading v-if="addLoading"></Loading>
</template>

<style lang="scss" scoped>
#cesiumContainer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
</style>
